<template>
	<view class="container">
		<view class="item">
			<van-cell-group>
				<view class="itemm">
					<van-cell value="">
						<template #title>
							<view class="itemmm">
								姓名 <van-field :value="inpnamevalue" style="width: 650rpx;" placeholder="请输入用户名"
									@change="shuruname" />
							</view>
						</template>
					</van-cell>
				</view>
				<view class="itemm">
					<van-cell value="">
						<template #title>
							<view class="itemmm">
								电话 <van-field :value="inptelvalue" style="width: 650rpx;" placeholder="请输入电话号码"
									@change="shurutel" />
							</view>
						</template>
					</van-cell>
				</view>
				<view class="itemm">
					<van-cell value=">">
						<template #title>
							<view class="itemmm">

								<van-field :value="fieldValue" label="地区" placeholder="请选择所在地区" @tap="xuanzhong" />



								<van-popup :show="isxianshi" position="bottom">

									<van-cascader v-if="isxianshi" title="请选择地区" style="width: 750rpx;"
										:value="cascaderValue" :options="options" active-color="#800080" @close="guanbi" :field-names="fieldNames"
										@finish="onFinish" />
								</van-popup>






							</view>
						</template>
					</van-cell>
				</view>
				<view class="itemm">
					<van-cell value="">
						<template #title>
							<view class="itemmm">
								<van-field :value="inpdizhivalue" placeholder="街道门牌楼层房间号等信息" style="width: 750rpx;"
									@change="shurudizhi" />

							</view>
						</template>

					</van-cell>
				</view>
				<view class="itemm">
					<van-cell value="">
						<template #title>
							<view class="itemmm">
								<text class="moren">是否是默认地址</text> <van-switch :checked="checked" @change="onChange" />
							</view>
						</template>

					</van-cell>
				</view>

			</van-cell-group>
		</view>
		<view class="btn">

			<van-button type="danger" block style="width: 100%;" round @click="xinzeng" v-if="name==''">保存</van-button>
			<view class="btnn">
				<van-button type="danger" block style="width: 100%;" round @click="xiugai"
					v-if="name!=''">修改</van-button>
			</view>

			<van-button type="default" block style="width: 100%;" round @click="shanchu" v-if="name!=''">删除</van-button>
		</view>
	</view>
</template>

<script>
	// import {
	// 	areaList
	// } from '@vant/area-data';

	import {
		getmorendizhi
	} from "../../../api/dizhiliebiao.js"
	import {
		addDiZhi,
		delDiZhi,
		xiugaiDiZhi
	} from "../../../api/tianjialiebiao.js"
	import addressData from '@/json/areas.json'
	export default {
		data() {
			return {
				checked: false,
				inpnamevalue: "",
				inptelvalue: "",
				show: false,
				areaList: {},
				inpdizhivalue: "",
				name: "",
				tel: "",
				sheng: "",
				shi: "",
				qu: "",
				xiangxi: "",
				addrId: 0,
				cascaderValue: "",
				isxianshi: false,
				commonAddr: 0,
				province: "",
				city: "",
				area: "",
				provinceId: 0,
				cityId: 0,
				areaId: 0,
				fieldValue: "",
				options: [],
				fieldNames:{
					text:'label',
					value:'value',
					chidren:'children'
				}
			}
		},
		onLoad(options) {

			let name = options.name
			let tel = options.tel
			let sheng = options.sheng
			let shi = options.shi
			let qu = options.qu
			let xiangxi = options.xiangxi
			let addrId = options.addrId
			let commonAddr = options.commonAddr
			this.name = name
			this.tel = tel
			this.sheng = sheng
			this.shi = shi
			this.qu = qu
			this.xiangxi = xiangxi
			console.log(this.name, "name")
			this.inpnamevalue = this.name
			this.inptelvalue = this.tel
			this.inpdizhivalue = this.sheng + this.shi + this.qu + this.xiangxi
			this.addrId = addrId
			this.commonAddr = commonAddr


		},
		onShow() {
			this.panduanswitch()
			this.options=addressData
			console.log(this.options,"options")
		},
		methods: {
			//如果点击的是默认地址 则开关打开
			panduanswitch() {
				console.log(this.commonAddr, "commonAddr")
				if (this.commonAddr == 1) {
					this.checked = true
				}
			},
			//开关点击事件
			onChange() {
				this.checked = !this.checked
				this.GETmorendizhi(this.addrId)

			},
			//输入姓名事件
			shuruname(event) {
				console.log("inpvalue", this.inpnamevalue)
				this.inpnamevalue = event.detail
			},
			//输入电话号码事件
			shurutel(event) {
				console.log("inptelvalue", this.inptelvalue)
				this.inptelvalue = event.detail
			},
			//输入地址事件
			shurudizhi(event) {
				console.log("inpdizhivalue", this.inpdizhivalue)
				this.inpdizhivalue = event.detail
			},
			//新增按钮事件
			xinzeng() {
				console.log("点击新增", )
				// this.name=this.inpnamevalue
				// this.tel=this.inptelvalue
				// 	this.xiangxi=this.inpdizhivalue
				this.xinzengdizhi()
			},
			//获取默认地址
			async GETmorendizhi(addrId) {
				let result = await getmorendizhi(addrId)
				console.log(result, "result")
			},
			//添加地址
			async xinzengdizhi() {
				let result = await addDiZhi({
					addrId: this.addrId,
					receiver: this.inpnamevalue,
					addr: this.inpdizhivalue,
					mobile: this.inptelvalue,
					provinceId: 0,
					cityId: 0,
					areaId: 0,
					province: this.province,
					city: this.city,
					area: this.area
					
				}).then((res) => {
					console.log("成功", res)
				}).catch((err) => {
					console.log("失败", err)
				})
			},
			// xuanzhong(e) {
			// 	const {
			// 		value
			// 	} = e.detail;
			// 	if (value === this.data.options[0].value) {
			// 		setTimeout(() => {
			// 			const children = [{
			// 					text: '杭州市',
			// 					value: '330100'
			// 				},
			// 				{
			// 					text: '宁波市',
			// 					value: '330200'
			// 				},
			// 			];
			// 			this.setData({
			// 				'options[0].children': children,
			// 			})
			// 		}, 500);
			// 	}
			// },
			//删除按钮点击事件
			shanchu(addrid) {
				console.log("删除")
				this.DELDIZHI()
			},
			//删除事件
			async DELDIZHI() {
				let result = await delDiZhi(this.addrId).then((res) => {
					console.log("删除成功", res)
				}).catch((err) => {
					console.log("删除失败", err)
				})
			},
			// xianshiqiqu() {
			// 	this.isxianshi = true
			// 	console.log(this.isxianshi, "点击组件this.isxianshi")
			// },
			//选中弹窗事件
			xuanzhong() {
				this.isxianshi = true
			},
			//关闭弹窗事件
			guanbi() {
				this.isxianshi = false
				console.log(this.isxianshi, "取消组件this.isxianshi")
			},
			//修改地址事件
			async xiugaidizhi() {
				let result = await xiugaiDiZhi({
					addrId: this.addrId,
					receiver: this.inpnamevalue,
					addr: this.inpdizhivalue,
					mobile: this.inptelvalue,
					provinceId: 0,
					cityId: 0,
					areaId: 0,
					province: this.province,
					city: this.city,
					area: this.area
				}).then((res) => {
					console.log("成功", res)
				}).catch((err) => {
					console.log("失败", err)
				})
			},
			//修改按钮点击事件
			xiugai() {
				this.xiugaidizhi()
			},
			//地区选择后事件
			onFinish(e) {
				const {
					selectedOptions,
					value
				} = e.detail
				const fieldValue = selectedOptions.map((option) => option.label).join('/')
				const newsId = selectedOptions.map((obj) => obj[Object.keys(obj)[0]])
				this.provinceId = newsId[0]
				this.cityId = newsId[1]
				this.areaId = newsId[2]
				const newsValue = selectedOptions.map((obj) => obj[Object.keys(obj)[1]])
				this.province = newsValue[0]
				this.city = newsValue[1]
				this.area = newsValue[2]
				this.fieldValue = fieldValue
				this.cascaderValue = value
				this.isxianshi = false

			}
		}
	}
</script>

<style lang="scss" scoped>
	.item {
		display: flex;
		flex-direction: column;
		width: 750rpx;

		// background-color: #800080;
		.itemm {
			.itemmm {
				display: flex;
				align-items: center;
				width: 750rpx;

				// background-color: #800080;
				.huise {
					margin-left: 40rpx;
					color: #7f7f7f;
				}

				.moren {
					margin-right: 280rpx;
					font-weight: 700;
				}
			}
		}
	}

	.btn {
		margin-top: 50rpx;

		.btnn {
			margin-top: 30rpx;
			margin-bottom: 30rpx;
		}
	}
</style>